<template>
	<PageWrapper
		title="分步表单"
		contentBackground
		content=" 将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。"
		contentClass="p-4"
	>
		<div class="step-form-form">
			<a-steps :current="current">
				<a-step title="填写转账信息" />
				<a-step title="确认转账信息" />
				<a-step title="完成" />
			</a-steps>
		</div>
		<div class="mt-5">
			<Step1 @next="handleStep1Next" v-show="current === 0" />
			<Step2 @prev="handleStepPrev" @next="handleStep2Next" v-show="current === 1" v-if="initSetp2" />
			<Step3 v-show="current === 2" @redo="handleRedo" v-if="initSetp3" />
		</div>
	</PageWrapper>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, toRefs } from 'vue';
import Step1 from './Step1.vue';
import Step2 from './Step2.vue';
import Step3 from './Step3.vue';
import { PageWrapper } from '#/components';
import { Steps } from 'ant-design-vue';

export default defineComponent({
	name: 'FormStepPage',
	components: {
		Step1,
		Step2,
		Step3,
		PageWrapper,
		[Steps.name]: Steps,
		[Steps.Step.name]: Steps.Step,
	},
	setup() {
		const current = ref(0);

		const state = reactive({
			initSetp2: false,
			initSetp3: false,
		});

		function handleStep1Next(step1Values: any) {
			current.value++;
			state.initSetp2 = true;
			console.log('step1的值为：', step1Values);
		}

		function handleStepPrev() {
			current.value--;
		}

		function handleStep2Next(step2Values: any) {
			current.value++;
			state.initSetp3 = true;
			console.log(step2Values);
		}

		function handleRedo() {
			current.value = 0;
			state.initSetp2 = false;
			state.initSetp3 = false;
		}

		return {
			current,
			handleStep1Next,
			handleStep2Next,
			handleRedo,
			handleStepPrev,
			...toRefs(state),
		};
	},
});
</script>
<style lang="less" scoped>
.step-form-content {
	padding: 24px;
	background-color: @component-background;
}

.step-form-form {
	width: 750px;
	margin: 0 auto;
}
</style>
